/*
 * @Author: jiu yin
 * @Date: 2024-05-07 14:09:35
 * @LastEditTime: 2024-05-30 20:25:43
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\ticket_order\component\ManualModal.tsx
 * jiu
 */
import { useState, useRef } from "react";
import Modal_edit from "@/comment/modal_edit";
import { Image, Button, Steps, Input, message } from "antd";
import Tables from "./Tables";
import "./index.scss";
import { thousands } from "@/utils";
import User_avatar from "@/comment/user_avatar";

export default function ManualModal(props: any) {
	let { isModalOpen,step } = props;
	let ticket_order_item = JSON.parse(sessionStorage.getItem("ticket_order_item") as string);
	
	// 下一步
	const next_setup = () => {
		if (!radioValueObj?.order_no) return message.error("请选择订单");
		step[1](1);
	};

	//单选
	let radioValueObjInfo=step[0]==1?ticket_order_item:{};
	let [radioValueObj, setRadioValueObj] = useState<any>(radioValueObjInfo);
	const radioValue = (value: any) => {
		setRadioValueObj(value);
	};
	// 核销码
	let [code, setCode] = useState("");
	const handleOk = (value: string) => {
		props.draw_a_bill(value, radioValueObj);
	};

	return (
		<Modal_edit title="手动出票" width={800} isModalOpen={isModalOpen}>
			<div className="mt-40px c-#161940 flex flex-col items-center">
				<section className="w-80%">
					<Steps current={step[0]} items={[{ title: "输入订单编号确认下单用户" }, { title: "输入核验码，确认后打印" }]} />
				</section>

				{step[0] == 0 && (
					<div className="flex flex-col items-center">
						<section className="mt-34px">
							<Tables radioValue={radioValue}></Tables>
						</section>
						<section>
							<Button className="w-200px" onClick={() => isModalOpen[1](false)}>
								取消
							</Button>
							<Button type="primary" className=" ml-20px w-200px" onClick={() => next_setup()}>
								下一步
							</Button>
						</section>
					</div>
				)}
				{step[0] == 1 && (
					<div className="flex flex-col items-center">
						<section className="mt-34px bg-#F7F9FF p-24px border-rd-10px w-700px  flex items-center ">
							<div className="w-220px">
								<p>{radioValueObj.order_no}</p>
								<p>{radioValueObj.created_at}</p>
							</div>
							<div className="w-200px">
								<User_avatar
									options={{
										avatar_url: radioValueObj.avatar_url,
										nickname: radioValueObj.nickname,
										id: radioValueObj.user_id,
									}}
								/>
							</div>

							<p className="w-97px">{radioValueObj.num || "-"}</p>
							<p className="flex-0.5">￥ {thousands(radioValueObj.pay_price)}</p>
						</section>
						<Input
							placeholder="请输入核验码"
							style={{ width: 700, marginTop: 20 }}
							onChange={(e: any) => setCode(e.target.value)}
							onPressEnter={(e: any) => handleOk(e.target.value)}
						/>
						<section className="mt-306px">
							<Button className="w-200px" onClick={() => isModalOpen[1](false)}>
								取消
							</Button>
							<Button className="w-200px  ml-20px" onClick={() => 	step[1](0)}>
								上一步
							</Button>
							<Button type="primary" className=" ml-20px w-200px" onClick={() => handleOk(code)}>
								确定
							</Button>
						</section>
					</div>
				)}
			</div>
		</Modal_edit>
	);
}
